<!-- 
The following file was created by Iwo Kadziela at TECHROAM: http://www.techroam.com
This file uses MySql database and AJAX to create autopopulating dynamic select boxes.
You need to create a database named "test" and use the following code to populate the mysql database:

CREATE TABLE `storelocator` (
`id` VARCHAR( 255 ) NOT NULL ,
`state` TEXT NOT NULL ,
`city` TEXT NOT NULL
);
INSERT INTO `storelocator` (id,state,city) VALUES (1,'MA','Andover');
INSERT INTO `storelocator` (id,state,city) VALUES (2,'MA','Boston');
INSERT INTO `storelocator` (id,state,city) VALUES (3,'NJ','New Brunswick');
INSERT INTO `storelocator` (id,state,city) VALUES (4,'PA','Philadelphia');
INSERT INTO `storelocator` (id,state,city) VALUES (5,'MA','Bedford');

-->


<html> 
<head>
<script src="request.js"></script>
<script type="text/javascript">

function getfirst(dd1)
{
clearSelect = document.getElementById('thirdbox'); 
clearSelect.options.length = 1;  
//above code clears the third select box when re-clicking the first select box

  var idx = dd1.selectedIndex;
  var first = dd1[idx].text;
  var par = document.forms["theform"];
  var parelmts = par.elements;
  var prezsel = parelmts["secondbox"];
  if (first != "Select Something One")
  {
 	Http.get({
		url: "./alpha.php?alpha=" + first + "%",
		callback: fillPrez,
		cache: Http.Cache.Get
	}, [prezsel]);
  }
}

function getsecond(dd1)
{
  var idx = dd1.selectedIndex;
  var second = dd1[idx].text;
  var par = document.forms["theform"];
  var parelmts = par.elements;
  var prezsel = parelmts["thirdbox"];
  if (second != "Select Something Two")
  {
 	Http.get({
		url: "./beta.php?state=" + second,
		callback: fillPrez,
		cache: Http.Cache.Get
	}, [prezsel]);
  }
}

function fillPrez(xmlreply, prezelmt)
{
  if (xmlreply.status == Http.Status.OK)
  {
    var prezresponse = xmlreply.responseText;
    var prezar = prezresponse.split("|");
    prezelmt.length = 1;
    prezelmt.length = prezar.length;
    for (o=1; o < prezar.length; o++)
    {
      prezelmt[o].text = prezar[o];
	  prezelmt[o].value = prezar[o];
    }
  }
  else
  {
    alert("Cannot handle the AJAX call.");
  }
}

function getthird(dd1,dd2) {
var idx = dd1.selectedIndex;
var third = dd1[idx].text;
  if (third != "Select The Final")
  {
 	Http.get({
		url: "./final.php?state=" + dd2 + "&city=" + third,
		callback: getit,
		cache: Http.Cache.Get
	});
  }
}

function getit(xmlreply){
if (xmlreply.status == Http.Status.OK)
  {
	document.getElementById("final").innerHTML= xmlreply.responseText;
  }  
  else
  {
    alert("Cannot handle the AJAX call.");
  }
}
</script>
<style>
body {
width:800px;
margin: 0px auto;
text-align:center;
}
p {display:inline;margin:20px;}
div {clear:both;width:800px;border:1px solid #999;padding:20px;margin:20px 0px 20px 0px;}
</style>
</head>

<body>

<form name="theform">
<p>
<select name="firstbox" size="13" multiple style="position: relative; width: 215px;" onChange="getfirst(this);">
<option>Select Something One</option>
<option>L</option>
<option>M</option>
<option>N</option>
<option>O</option>
<option>P</option
<option>Q</option>
<option>R</option>
</select>
</p>
<p>
<select name="secondbox" size="13" style="position: relative; width: 215px;" onChange="getsecond(this);">
<option>Select Something Two</option>
</select>
</p>
<p>
<select id="thirdbox" name="thirdbox" size="13" style="position: relative; width: 215px;" onChange="getthird(this, document.theform.secondbox.options[document.theform.secondbox.selectedIndex].value);">
<option>Select The Final</option>
</select>
</p>
</form>
<center>THE FINAL CONTENT PULLED FROM DATABASE</center> 
<div id="final"></div>
</body>
</html>
